<template>
  <div class="app-container">
    <!-- <div class="right-detail"> -->
    <div class="cbox">
      <el-form class="searchForm" ref="flt" :rules="rules" :inline="true" label-width="10rem" size="mini">
            <el-form-item label="运单编号: ">
              <el-input placeholder="请输入运单编号" v-model="searchForm.wayBill" style="width: 100%" clearable></el-input>
            </el-form-item>
            <el-form-item label="仲裁类型：" prop="arbitrationType">
              <el-select clearable v-model="searchForm.arbitrationType">
                <el-option
                  v-for=" item in arbiType"
                  :key="item.rvLowValue"
                  :value="item.rvLowValue"
                  :label="item.rvCmeaning"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="10px">
              <el-button @click="searchType" type="primary">查询</el-button>
            </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="10" class="btn-area">
      <el-col :span="24">
        <buttonName @clickEvent="clickEventDom"></buttonName>
<!--        <el-button size="mini" type="primary" plain v-if="isAuth('add')" @click="add">仲裁</el-button>-->
<!--        <el-button size="mini" type="primary" plain v-if="isAuth('del')" @click="del('diong')">审核</el-button>-->
<!--        <el-button size="mini" type="danger" plain @click="examine">删除</el-button>-->
      </el-col>
    </el-row>
    <div class="table" ref="topType">
      <!-- <div class="btn-area" ref="btnArea">
        <el-button plain size="mini" type="success" @click="add">新增市</el-button>
        <el-button plain size="mini" type="primary" @click="del('diong')">编辑市</el-button>
        <el-button plain size="mini" type="danger" @click="examine">删除市</el-button>
      </div> -->
      <div class="inner" ref="inner">
        <el-table
          :data="DetailedData"
          border
          :height="maxHeight"
          :header-cell-style="{ textAlign: 'center' }"
          highlight-current-row
          @row-dblclick='rowdbClickA'
          @row-click="rowClick">
          <el-table-column size="mini" align="center" type="index" :index="indexMethod" show-overflow-tooltip label="序号" width="50"></el-table-column>
          <el-table-column size="mini" align="center" width="120"  show-overflow-tooltip label="仲裁标识" prop="arbitrationStatus">
            <template slot-scope="scope">
              <span>{{arbitrationStatusList[scope.row.arbitrationStatus]}} </span>
            </template>
          </el-table-column>
          <el-table-column size="mini" align="center" show-overflow-tooltip label="审核标识" prop="auditStatus">
            <template slot-scope="scope">
              <span>{{auditStatusList[scope.row.auditStatus]}} </span>
            </template>
          </el-table-column>
          <el-table-column size="mini" align="center" width="120"  show-overflow-tooltip label="仲裁类型" prop="arbitrationType">
            <template slot-scope="scope">
              <span>{{arbitrationTypes[scope.row.arbitrationType]}} </span>
            </template>
          </el-table-column>
          <el-table-column size="mini" align="center" prop="tayIeflag" width="200" show-overflow-tooltip label="运单编号"></el-table-column>
          <el-table-column size="mini" align="center" prop="tayStates" width="120" show-overflow-tooltip label="车牌号"></el-table-column>
          <el-table-column size="mini" align="center" prop="tdrName" width="120" show-overflow-tooltip label="司机"></el-table-column>
          <el-table-column size="mini" align="center" prop="wabStatusName" width="120" show-overflow-tooltip label="运单状态"></el-table-column>

          <el-table-column size="mini" align="center" width="120" show-overflow-tooltip label="货物名称" prop="wabGoodname"></el-table-column>
          <el-table-column size="mini" align="center" width="120" show-overflow-tooltip label="货物重量" prop="wabWeight"></el-table-column>
          <el-table-column size="mini" align="center" width="175" show-overflow-tooltip label="装货时间" prop="wcdSttime"></el-table-column>
          <el-table-column size="mini" align="center" width="175" show-overflow-tooltip label="卸货时间" prop="wcdEdtime"></el-table-column>

          <el-table-column size="mini" align="center" width="120" show-overflow-tooltip label="审核操作人" prop="auditor"></el-table-column>
          <el-table-column size="mini" align="center" width="175" show-overflow-tooltip label="审核操作时间" prop="auditTime"></el-table-column>
          <el-table-column size="mini" align="center" width="120" show-overflow-tooltip label="仲裁内容" prop="arbitrationContent"></el-table-column>
          <el-table-column size="mini" align="center" width="120" show-overflow-tooltip label="仲裁人" prop="arbitrationtor"></el-table-column>
          <el-table-column size="mini" align="center" width="175" show-overflow-tooltip label="仲裁时间" prop="arbitrationted"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      class="pagination"
      small
      background
      ref="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.pageSize"
      :layout="Pagination.layout"
      :total="Pagination.total"
    ></el-pagination>

    <!-- 弹出框 新增 编辑 -->
    <el-dialog
      v-el-drag-dialog
      width="40%"
      :title='addText'
      :visible.sync="addShowA"
      v-if="addShowA"
      @close ='closeDialog'
      :close-on-press-escape ='false'
      :close-on-click-modal="false">
      <el-form label-width="10rem" :model="xzData" ref="xzData" size="mini" :rules="addRules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="仲裁类型：" prop="arbitrationType">
              <el-select size="mini" clearable v-model="xzData.arbitrationType" :disabled='disabled'>
                <el-option
                  v-for=" item in arbiType"
                  :key="item.rvLowValue"
                  :value="item.rvLowValue"
                  :label="item.rvCmeaning"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="created" label="仲裁时间："  >
              <el-date-picker
                :disabled='disabled'
                v-model="xzData.created"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="arbitrationContent" label="仲裁内容：" >
              <el-input :rows="8" maxlength="32" :disabled='disabled' type="textarea"  v-model="xzData.arbitrationContent"
                        clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="contactDetails" label="联系方式：">
              <el-input size="mini" maxlength="11" :disabled='disabled' v-model="xzData.contactDetails" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if = 'hedden'>
          <el-col :span="24">
            <el-form-item prop="auditOpinon" label="审核意见：">
              <el-input :rows="8" maxlength="32" :disabled='disabledA' type="textarea"  v-model="xzData.auditOpinon"
                        clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size='mini' @click="close">关闭</el-button>
        <el-button size='mini' type="primary" v-if="see" @click="saveEditor('xzData')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    ComplaintList
  } from '@/request/api'
  import resizeMixin from '@/mixins/resize'
  import paginationMixin from '@/mixins/pagination'
  import isAuth from '@/mixins/buttonAuth'
  import {getWillBillList} from "@/request/internal/worktrack";
  import {
    addArbitrationServer,
    arbitrationType, auditArbitration,
    queryArbitrateByWabCodeServer
  } from "@/request/arbitration/carriageArbitration";
  import buttonName from "@/components/buttonName/button-name.vue";

  export default {
    name: 'router.carriageArbitration',
    mixins: [resizeMixin, paginationMixin,isAuth],
    data() {
      return {
        searchForm: {
          orderNum: '', // 订单号
          wayBill: '', // 运单号
          wayBillStatus: '', // 运单状态
          carNum: '', // 车牌号
          driver: '', // 司机
          arbitrationType: '' //仲裁类型
        },
        item: {
          item: true,
          itemA: false
        },
        hedden: false,
        options: [
          {
            value: 'Y',
            label: '激活'
          },
          {
            value: 'N',
            label: '未激活'
          }
        ],
        arbitrationStatusList: {
          YZC: '已仲裁',
          YSH: '已审核',
          CS: '待仲裁'
        },
        arbitrationTypes: {
          GN: '国内仲裁',
          SW: '涉外仲裁'
        },
        auditStatusList: {
          Y: '已审核',
          N: '未审核'
        },
        maxHeight: -1,
        disabled: false,
        disabledA: false,
        listData: [],
        listDataA: [],
        diong: 'E',
        addText: '',
        addShowA: false, // 新增 编辑
        see: true, //保存按钮
        DetailedData: [], //主列表的数据
        xzData: {},// 传给新增 编辑弹出框的数据
        PageIndexs: '',
        PageSizes: '',
        itemData: [], //当前行数据
        AuditData: [], //加入当前行数据
        shiList: [], // 下拉框
        arbiType: [], // 仲裁类型
        //  dialogForm: {
        //   ctyCd: '',
        //   ctyCname: '',
        //   ctyeIsvalid: 'Y',
        //   ctyEname: '',
        //   ctyRemark: ''
        // },
        //表单验证 新增 编辑
        addRules: {
          ctyeShrchn: [
            {
              pattern: /^[\u4e00-\u9fa5]+$/,
              message: '请输入中文汉字',
              trigger: 'change'
            }
          ],

          created: [
            {required: true, message: '请输入仲裁时间', trigger: 'change'}
          ],
          ctyeCityId: [
            {required: true, message: '请选择省名称', trigger: 'change'}
          ],
          ctyeCode: [
            {required: true, message: '请填写市代码', trigger: 'blur'}
          ],
          ctyeChnname: [
            {required: true, message: '请填写中文名称', trigger: 'blur'},
            {
              pattern: /^[\u4e00-\u9fa5]+$/,
              message: '请输入中文汉字',
              trigger: 'change'
            }
          ],
          ctyeIsvalid: [
            {
              required: true,
              message: '有效标志不能为空',
              trigger: 'blur'
            }
          ],
          ctyeEgsname: [
            {required: true, message: '请填写英文名称', trigger: 'blur'},
            {
              pattern: /^[a-zA-Z ]+$/,
              message: '请输入英文',
              trigger: 'blur'
            }
          ],
          arbitrationType: [{required: true, message: '仲裁类型不能为空', trigger: 'blur'}],
          arbitrationContent: [{required: true, message: '仲裁内容不能为空', trigger: 'blur'}],
          contactDetails: [{required: true, message: '联系方式不能为空', trigger: 'blur'}],
          auditOpinon: [{required: true, message: '审核意见不能为空', trigger: 'blur'}],
          ctyePrename: [
            {required: true, message: '请填写首字母', trigger: 'blur'},
            {
              pattern: /^[a-zA-Z ]+$/,
              message: '请输入首字母',
              trigger: 'blur'
            }
          ],
        },
      }
    },
    created() {
      this.refreshList()
      this.resize = () => {
        this.maxHeight = this.$refs.inner.offsetHeight
      }
    },
    mounted() {
      arbitrationType().then(res=>{
        if(res.success==='1'){
          this.arbiType=res.data
        }
      })
      this.refreshList()
    },

    methods: {
      clickEventDom(item) {
        if (item.mdlCode === 'add') {
          this.add()
        } else if (item.mdlCode === 'del') {
          this.del('diong')
        }
      },
      // 切换大写
      uppercase(key) {
        this.xzData[key] = this.xzData[key].toUpperCase()
      },
      resetDialogForm() {
        return (this.dialogForm = {
          ctyeCityId: '',
          ctyeCode: '',
          ctyeChnname: '',
          ctyeEgsname: '',
          ctyeShrcode: '',
          ctyeShrchn: '',
          ctyeRemark: '',
          ctyeIsvalid: 'Y',
          ctyePrename: ''
        })
      },
      //省下拉框
      shengData() {
        shengCityManagementXL().then(res => {
          this.listDataA = res.data
        })
      },
      // 列表数据
      getList(currentPage, pageSize, updateTotal) {
        getWillBillList({
          // fitUUID:this.from.uuid,
          // attCode:this.from.attCode,
          // wabCode:this.from.wabCode,
          // iscomplaint:this.from.iscomplaint,
          // complaintContents:this.from.contents,
          // complaint:this.from.complaint,
          // complaintTime:this.from.complaintTime,
          //   ctyeChnname:this.from.name,
          //   ctyeCityId:this.from.customerName,
          billCode: this.searchForm.wayBill,
          arbitrationType: this.searchForm.arbitrationType,
          isPlatform: 'Y',
          PageIndex: this.Pagination.currentPage.toString(),
          PageSize: this.Pagination.pageSize.toString()
        }).then(res => {
          this.DetailedData = res.data.map(item => {
            // queryArbitrateByWabCodeServer({arbitrationWabCode: item.wabCode}).then(res=>{
            //   this.AuditData = res.data
            // })
            return {
              wabStatus: item.wabStatus, //运单状态
              wabUuid: item.attUuid,     //运单id
              uuid: item.uuid,
              tayNo: item.attCode,       //订单号
              tayIeflag: item.wabCode,   //运单号
              tayStates: item.trkNo,     //车牌号
              tdrName: item.dvrName,     //司机姓名
              dvrCtctel: item.dvrCtctel, //司机电话
              wabStatusName: item.wabStatusName, //运单状态中文名
              wabGoodname: item.wabGoodname,     //货名
              wabWeight: item.wabWeight,        //运单重量
              wcdSttime: item.wcdSttime,        //装货时间
              wcdEdtime: item.wcdEdtime,        //卸货时间

              WAB_ETC: item.wabEtc || 0,         //ETC费用
              WAB_OILCONS: item.wabOilcons || 0, //油耗费用
              WAB_POERF: item.wabPoerf || 0,     //运费
              RESUL: item.resul || 0,            //总费用

              arbitrationContent: item.arbitrationContent,  // 仲裁内容
              arbitrationId: item.arbitrationId,            //仲裁id
              auditStatus: item.auditStatus,                //审核状态
              auditor: item.auditor,                //审核操作人
              auditTime: item.auditTime,                //审核操作时间
              arbitrationStatus: item.arbitrationStatus,    //仲裁状态
              created: item.created,    //仲裁时间
              arbitrationType: item.arbitrationType,        //仲裁类型
              arbitrationWabCode: item.arbitrationWabCode,  //仲裁运单号
              arbitrationtor: item.arbitrationtor,  //仲裁人
              arbitrationted: item.arbitrationted,  //仲裁时间
              auditOpinon: item.auditOpinon,                //审核意见
              contactDetails: item.contactDetails           //联系方式
            }
          })
          updateTotal(res.total)
          // updateTotal(Number(res.total))
          console.log(res, 'aaaaaaaaaaaaaaaaaaaaaa')
        })
        this.itemData = {}
      },
      // 点击搜索
      searchType() {
        this.refreshList()
      },
      //新增
      add() {
        if (this.itemData.arbitrationStatus == 'YZC') {
          this.$alert('该订单已仲裁', '提示', {
            confirmButtonText: '确定'
          })
          return false
        }
        if (this.itemData.arbitrationStatus == 'YSH') {
          this.$alert('该仲裁已审核，不可重复仲裁', '提示', {
            confirmButtonText: '确定'
          })
          return false
        }
        console.log(111111111111111111)
        if (Object.keys(this.itemData).length) {
          console.log(this.itemData, 222222222222222)
          this.addText = '订单仲裁'
          this.diong = ''
          // queryArbitrateByWabCodeServer({arbitrationWabCode: this.itemData.tayIeflag}).then(res=>{
          //   this.itemData = res.data
          // })
          // console.log(this.itemData, 111111111)
          this.addShowA = true
          this.disabled = false
          this.disabledA = false
          this.see = true
          arbitrationType().then(res=>{
            if(res.success==='1'){
              this.arbiType=res.data
            }
          })

          this.xzData = {
            arbitrationId: this.itemData.arbitrationId,
            arbitrationWabCode: this.itemData.tayIeflag,
            arbitrationType: '',
            arbitrationContent: '',
            contactDetails: ''
          }
        } else {
          this.$alert('请选择需要仲裁的数据', '提示', {
            confirmButtonText: '确定'
          })
          return false
        }

      },
      //审核
      del() {
        if (Object.keys(this.itemData).length) {
          if (this.itemData.arbitrationStatus == 'CS') {
            this.$alert('该数据待仲裁，不可审核', '提示', {
              confirmButtonText: '确定'
            })
            return false
          }
          if (this.itemData.auditStatus == 'Y') {
            this.$alert('该仲裁已审核，不可重复审核', '提示', {
              confirmButtonText: '确定'
            })
            return false
          }
          this.xzData = this.itemData
          this.addText = '审核'
          this.diong = 'E'
          this.hedden = true
          this.addShowA = true
          this.see = true
          this.disabled = true
          this.disabledA = false
        } else {
          this.$alert('请选择需要审核的数据', '提示', {
            confirmButtonText: '确定'
          })
          return false
        }
      },
      //删除
      examine() {
        if (Object.keys(this.itemData).length) {
          this.$confirm('您确认要删除此数据吗?', '提示', {
            closeOnClickModal: false,

          }).then(() => {
            delcityManagement({ctyeCode: this.itemData.ctyeCode}).then(res => {
              if (res.success !== '1') {
                this.$message({
                  type: 'success',
                  message: '删除失败'
                })
                return
              } else {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                this.refreshList()
                this.close()
              }
            })
          })
        } else {
          this.$alert('请选择需要删除的数据', '提示', {
            confirmButtonText: '确定'
          })
          return false
        }

      },
      //双击查看
      rowdbClickA(row) {
        this.addText = '查看仲裁信息'
        this.addShowA = true
        this.see = false
        this.xzData = row
        this.hedden = true
        this.disabled = true
        this.disabledA = true
      },
      //新增 编辑  点击保存
      saveEditor(xzData) {
        this.$refs[xzData].validate((valid) => {
          if (valid) {
            if (this.diong === 'E') {
              auditArbitration({
                arbitrationId: this.itemData.arbitrationId,
                auditOpinon: this.itemData.auditOpinon
              }).then(res => {
                if (res.success !== '1') {
                  this.$message({
                    type: 'success',
                    message: '审核失败'
                  })
                } else {
                  // this.xzData = []
                  this.$message({
                    type: 'success',
                    message: '审核成功'
                  })
                  this.close()
                  this.refreshList()
                }
              })
            } else {
              addArbitrationServer(this.xzData).then(res => {
                if (res.success !== '1') {
                  this.$message({
                    type: 'success',
                    message: '仲裁失败'
                  })
                } else {
                  this.$message({
                    type: 'success',
                    message: '仲裁成功'
                  })
                  this.close()
                  this.refreshList()
                  this.$refs[xzData].resetFields()
                }
              })
            }
          } else {
            return false
          }
        })
      },
      // 关闭弹出框
      close() {
        this.addShowA = false
        this.hedden = false
        this.refreshList()
      },
      //点击弹出框X号关闭
      closeDialog(){
         this.hedden = false
      },
      //当前行数据
      rowClick(row) {
        this.itemData = row
      }
    },
    components: {
      buttonName
    },
  }
</script>

<style lang="scss" scoped>
  .el-select {
    width: 100%;
  }
  .app-container {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;


    .table {
      flex: 1;
      position: relative;
      overflow: hidden;

      .inner {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .el-pagination {
        height: 4rem;
        flex: 0 0 auto;
        margin: 1rem 0;
      }
    }
  }
  .cbox{
    margin-left: -23px;
  }
</style>
